{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static "static/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "static/factory_venu_style.css" %}">
    <style>
        .button_size{
        width: 100px;
        height: 40px;
        border-radius: 15px;
    }
        .main_div{
            height: 100%;
            width: 100%;
        }
        .img_size{
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body style="background-color: #262626">

<div style="position: absolute;top: 20px;width:100%;height:80px;text-align: center">
    <h1 style="color: #dcab25;font-size: 50px">电力监控Electric</h1>
</div>


{#头部导航#}
<div style="position: absolute;top: 90vh;width:100%;height:80px;z-index: 100">
<ul class="nav justify-content-center nav-pills">
     <li class="nav-item">
    <a class="nav-link " href="/big_data_view/"> <button class="btn btn-warning button_size" type="button">首页</button>
   </a>
  </li>
  <li class="nav-item">
    <a class="nav-link " href="/factory_venu/"> <button class="btn btn-warning button_size" type="button">生产环境</button>
   </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/machine_data/"> <button class="btn btn-sm btn-warning button_size" type="button">机台数据</button></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="/power_monitor/"><button class="btn btn-sm btn-warning button_size" type="button">电力监控</button></a>
  </li>
  <li class="nav-item">
    <a class="nav-link " href="/video_control/" ><button class="btn btn-sm btn-warning button_size" type="button">视频监控</button></a>
  </li>
     <li class="nav-item">
    <a class="nav-link " href="http://10.130.1.16:8001/admin/" ><button class="btn btn-sm btn-warning button_size" type="button">生产管理</button></a>
  </li>
</ul>
</div>
{#头部导航#}

{#总行#}
<div  class="row" style="height:85vh;margin-top: 120px;width: 100%;">
{#    左边图片容器#}
    <div class="col-md-4" style=""><img class="img_size" src="{% static "img/img_machine_data/machine_data_CNC.png" %}"><img class="img_size" style="margin-top: 100px" src="{% static "img/img_machine_data/machine_data_CNC1.png" %}"></div>
{#    右边表格容器#}
    <div class="col-md-8" style="">
{#        上表格#}
      <div style="margin-top: 50px">
        <table class="table table-striped table-dark">
  <thead>
    <tr class="bg-warning">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>

{#下表格#}
    <div style="margin-top: 180px">
         <table class="table table-striped table-dark">
  <thead>
    <tr class="bg-warning">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
     </div>


    </div>
</div>


</body>
</html>